<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本表格</title>
</head>
<body>
<!--
    一个table标签对应一个表格
    每一个表格中可以存在无数个行与列
    行与列的交叉组成了一个个的单元格
    一个tr表示一行
    一个th/td表示一列
    th与td的区别
        th的内容默认是居中的,且字体加粗
            一般用于表头
        td的内容默认居左,字体不加粗
            一般用于表正文
        两者的字体样式是一致的
    常用属性
    border:设置表格边框厚度,其值是一个数字,默认为0
        0表示没有边框,数字越大,边框越厚
    width/height:设置表格的宽度/高度
    align:设置水平对齐方式
        该属性可以在table、tr、td中使用
        其值有三种:left(居左)、center(居中)、right(居右)
        在table中设置表示表格处于哪一个位置
        在tr与td中设置,表示单元格内容的对齐方式
        如果同时设置多处,根据范围大小判断优先级
        范围越小,优先级越高
        即:td/th的优先级>tr
    valign:设置单元格内容垂直对齐方式
        只在行与列中进行设置
        其值有三种:top(居上)、middle(居中)、bottom(居下)
        在tr中设置时表示这一行所有单元格的垂直对齐方式
        在td/th中设置时表示这一个单元格的垂直对齐方式
    bordercolor:设置表格边框的颜色
    bgcolor:设置表格的背景色
        可以在table、tr、td/th中使用
    background:设置表格的背景图片
        可以在table、tr、td/th中使用

        当表格同时定义了背景图与背景色时,同一级的情况下背景图的优先级高于背景色
        如果不是同一级,则范围小的高于范围大的

    cellpadding:设置表格的单元格与内容之间的距离
    cellspacing:设置单元格与单元格之间的距离
-->
<table border="10" width="500px" height="300px" align="center" bordercolor="red" bgcolor="gray" background="../images/heihei.gif" cellpadding="10px" cellspacing="10px">
    <tr bgcolor="pink" background="../images/heihei.gif">
        <th valign="top">单元格</th>
        <th>单元格</th>
        <th bgcolor="green">单元格</th>
        <th>单元格</th>
        <th>单元格</th>
    </tr>
    <tr align="center">
        <td>单元格</td>
        <td>单元格</td>
        <td align="right">单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    <tr valign="bottom">
        <td align="center">单元格</td>
        <td>单元格</td>
        <td valign="middle">单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
</table>
</body>
</html>